<template>
  <div>
      <van-nav-bar title="技改申请" left-arrow="" @click-left='goBack()'>
		</van-nav-bar>
    <!-- <van-search
      placeholder="搜索单号id"
      v-model="searchData"
			show-action=""
    ><div slot="action" @click="onSearch">搜索</div>
		</van-search> -->
		<!-- <van-cell title="技改单号" value-class='cellValue' title-class="cellTitle">
			<div slot='default' class="default">
				<van-dropdown-menu :border='false' :hairline='false'>
					<van-dropdown-item :border='false' :options="options" v-model="value">
					</van-dropdown-item>
				</van-dropdown-menu>
			</div>
		</van-cell> -->
		<div class="radio">
		  <van-radio-group v-model="radio">
		    <van-cell-group>
		      <van-cell title-class='title' title="未完成" clickable @click="radio = '1'">
		        <van-radio slot="right-icon" checked-color='rgb(103, 177, 251)' name="1" />
		      </van-cell>
		      <van-cell title-class='title' title="已完成" clickable @click="radio = '2'">
		        <van-radio slot="right-icon" name="2" checked-color='rgb(103, 177, 251)' />
		      </van-cell>
		    </van-cell-group>
		  </van-radio-group>
		</div>
     <div class="info" v-show="unFinish"  v-for="(item,i) in unFinishList" :key="item.id">
				<div class="cell-info">
					<div class="numCell">
						<van-cell :border="false" title="技改单号" :value="item.id" value-class='num'></van-cell>
					</div>
					<van-cell title="技改名称" :border="false" :value="item.name"></van-cell>
					<van-cell title="申请人" :border="false" :value="item.applyusername"></van-cell>
					<van-cell title="技改内容" :border="false" :value="item.content"></van-cell>
					<van-cell title="申请时间" :value="item.applyDate" :border="false"></van-cell>
					<van-cell is-link="" @click='toFinish(item.id,i)'>
						<span class="toRepair">完成技改</span>
						<img src="" slot='right-icon' />
					</van-cell>
				</div>
			</div>
			 <div class="info" v-show="!unFinish" v-for="(item,index) in finishedList" :key="item.id">
							<div class="cell-info">
								<div class="numCell">
								
									<van-cell :border="false" title="技改单号" :value="item.id" value-class='num'></van-cell>
								</div>
								<van-cell title="技改名称" :border="false" :value="item.name"></van-cell>
								<van-cell title="申请人" :border="false" :value="item.applyusername"></van-cell>
								<van-cell title="技改内容" :border="false" :value="item.content"></van-cell>
								<van-cell title="申请时间" :value="item.applyDate" :border="false"></van-cell>
								<van-cell title="执行人" :value="item.completeusername" :border="false"></van-cell>
								<van-cell title="执行时间" :value="item.completeDate"></van-cell>
							</div>
						</div>
  </div>
</template>
<script>
	import moment from 'moment'
	import {Toast} from 'vant'
export default {
  data() {
    return {
			value:'',
      searchData: "",
      showkeywords: false,
			finishedList:[],
			unFinishList:[],
			radio:'1',
			unFinish:true,
			options:[]
    };
  },
  created(){
      this.allInfo()
  },
	watch:{
		radio(newVal){
				if(newVal === '1'){
					this.unFinish = true
				}else{
					this.unFinish = false
				}
		},
		/* value(newVal){
			this.$axios.post('/Renovation/selectRenovation.do',{id:newVal}).then(res=>{
				if(res.data.status === 200){
					res.data.msg.forEach(item=>{
						if(!item.completeusername){
							this.unFinishList.push(item)
						}else{
							this.finishedList.push(item)
						}
					})
					this.$forceUpdate()
				}
			})
		} */
	},
  methods: {
		toFinish(id,i){
			let newTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
			this.$axios.post('/Renovation/finishRenovation.do',{completeDate:newTime,completeusername:JSON.parse(localStorage.cksLoginInfo).userName,id:id}).then(res=>{
				if(res.data.status === 200){
					Toast.success({message:'已完成技改',duration:900})
					this.unFinishList.splice(i,1)
					this.allInfo()
				}
			})
		},
    allInfo(){
        this.$axios.post('/Renovation/selectAllRenovation.do').then(res=>{
            this.info = res.data.msg
            res.data.msg.forEach(item=>{
							this.options.push({text:item.id,value:item.id})
							if(!item.completeusername){
								this.unFinishList.push(item)
							}else{
								this.finishedList.push(item)
							}
						})
        })
    }

  }
};
</script>
<style scoped>
	.cellTitle {
		width: 5.625rem;
		flex: 1;
	}
	
	.cellValue {
		text-align: left;
		flex: 3;
	}
	.van-dropdown-menu {
		height: 1.25rem;
		line-height: 1.25rem;
	}
	.toRepair {
		display: flex;
		justify-content: center;
		border-top: 1px solid #EEEEEE;
		font-size: .8rem;
		color: red;
		padding-top: .5rem;
	}
	 .van-radio-group{
	  margin-top: 1rem;
	}
	.title{
	  color: #222222;
	}
    .van-button {
  color: #777;
}
.van-button--default {
  border: none;
}
.keywords {
  font-size: 0.8rem;
  color: #999999;
  margin-bottom: 0.8rem;
}
.numCell{
		padding-bottom: .5rem;
		border-bottom: 1px solid #EEEEEE;
	}
	.num{
		font-size: .9rem;
		color: #222;
		font-weight: bold;
	}
	.van-cell {
		padding: .3rem 1rem !important;
		color: #969799;
	}
	
	.repairCard {
		padding: .6rem;
		margin-top: .5rem;
	}
	
	.info {
		margin-bottom: .3rem;
		padding: .6rem;
	}
	.cell-info {
		box-shadow: 2px 2px 5px #ADADAD;
		padding-bottom: .8rem;
	}
</style>